<template>
  <div class="car_wrap">
    <div class="car_list">
      <swiper class="swiper" :options="swiperOption">
        <swiper-slide>
          <cars-list height="820px"></cars-list>
        </swiper-slide>
        <swiper-slide>
          <cars-list></cars-list>
        </swiper-slide>
        <swiper-slide>
          <cars-list></cars-list>
        </swiper-slide>
        <swiper-slide>
          <cars-list></cars-list>
        </swiper-slide>
        <swiper-slide>
          <cars-list></cars-list>
        </swiper-slide>
        <swiper-slide>
          <cars-list></cars-list>
        </swiper-slide>
      </swiper>
      <div class="swiper-button-prev" slot="button-prev"></div>
      <div class="swiper-button-next" slot="button-next"></div>
    </div>
  </div>
</template>

<script>
import carsList from "@/components/content/carsList/carsList";
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/swiper-bundle.min.css";
export default {
  data() {
    return {
      swiperOption: {
        slidesPerView: 3,
        spaceBetween: 30,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        }
      }
    };
  },
  components: {
    carsList,
    Swiper,
    SwiperSlide
  },
  methods: {
    // handleShowUserClick() {
    //   if (this.$route.path === "/user") return;
    //   this.$router.push("/user");
    // }
  }
};
</script>

<style lang="scss" scoped>
.car_wrap {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 100px;
  z-index: 99;
  .car_list {
    position: relative;
    padding: 0 155px;
    .swiper-container {
      overflow: inherit;
    }
    .swiper-button-prev,
    .swiper-button-next {
      top: 50%;
      width: 60px;
      height: 100px;
      margin-top: -50px;
      border-radius: 100px;
      background-color: #fff;
      outline: none;
      @include webkit(box-shadow, 0 0 18px 0 rgba(0, 0, 0, 0.2));
      @include webkit(transition, all 0.3s ease 0s);
      &.swiper-buttom-disablied {
        opacity: 1;
      }
    }
    .swiper-button-prev {
      left: 53px;
      &::after {
        content: "";
        width: 14px;
        height: 14px;
        border-left: 3px solid #000;
        border-top: 3px solid #000;
        margin-left: 5px;
        @include webkit(transform, rotate(-45deg));
      }
      &:hover {
        background-color: $color_main;
        &::after {
          border-left: 3px solid $color_blue;
          border-top: 3px solid $color_blue;
        }
      }
    }
    .swiper-button-next {
      right: 53px;
      &::after {
        content: "";
        width: 14px;
        height: 14px;
        border-right: 3px solid #000;
        border-top: 3px solid #000;
        margin-right: 5px;
        @include webkit(transform, rotate(45deg));
      }
      &:hover {
        background-color: $color_main;
        &::after {
          border-right: 3px solid $color_blue;
          border-top: 3px solid $color_blue;
        }
      }
    }
  }
}
</style>